<template>
    <div class="demo-container">
        <div class="demo-container-left">
            <div class="demo-container-content_title"> <span>{{ state.chartsTitle.leftTitle }}</span></div>
            <el-scrollbar>
                <div class="demo-container-left_one fl-column" style="height: 350px;">
                    <div class="childrenTitle"> {{ state.chartsTitle.dayBarTitle }}</div>
                    <div ref="leftDayBarChartRef" class="flexone"></div>
                </div>
                <div class="demo-container-left_two fl-column" style="height: 350px;">
                    <div class="childrenTitle"> {{ state.chartsTitle.monthBarTitle }}</div>
                    <div ref="leftMonthBarChartRef" class="flexone"></div>
                </div>
                <div class="demo-container-left_three fl-column" style="height: 350px;">
                    <div class="childrenTitle"> {{ state.chartsTitle.yearBarTitle }}</div>
                    <div ref="leftYearBarChartRef" class="flexone"></div>
                </div>
            </el-scrollbar>
        </div>
        <div class="demo-container-top">

            <div class="demo-container-top_one">
                <div class="oneItem">
                    <div class="num">2190</div>
                    <div class="desc desc1">设备总数</div>
                </div>
                <div class="oneItem">
                    <div class="num">190</div>
                    <div class="desc desc2"> 季度新增</div>
                </div>
                <div class="oneItem">
                    <div class="num">3,001</div>
                    <div class="desc desc3">运营设备</div>
                </div>
                <div class="oneItem">
                    <div class="num">108</div>
                    <div class="desc desc4">异常设备</div>
                </div>
            </div>
            <div class="map">
                <div class="leftCardWarp">
                    <div class="leftCard"></div>
                    <div class="cardtitle">访客预约总人数</div>
                    <div class="leftCardNum">160<span>人</span> </div>
                </div>
                <div class="map1"><img :src="map"></div>
                <div class="rightCardWarp">
                    <div class="leftCard"></div>
                    <div class="cardtitle">访客预约总人数</div>
                    <div class="leftCardNum">320 <span>人</span></div>
                </div>
            </div>

            <div class="demo-container-center" style="height: calc(100vh - 473px)">
                <div class="demo-container-center_one fl-column" style="height: 100%;">
                    <div class="demo-container-content_title"> <span>{{ state.chartsTitle.topTitle }}</span></div>
                    <el-table :data="state.tableData" style="width: 100%;height: 100%;" ref="myTable"
                        @mouseover.native="clearScroll" @mouseleave.native="createScroll">
                        <el-table-column fixed prop="code" label="工号" />
                        <el-table-column prop="url" label="照片">
                            <template #default="scope">
                                <img :src="avatarImg" :width="45" :height="60" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" />
                        <el-table-column prop="address" label="区域" />
                        <el-table-column prop="time" label="时间" />
                    </el-table>
                </div>
            </div>
        </div>
        <div class="demo-container-right">
            <div class="demo-container-content_title"> <span>{{ state.chartsTitle.rightTitle }}</span></div>
            <el-scrollbar>
                <div class="demo-container-right_one fl-column" style="height: 350px;">
                    <div class="childrenTitle">{{ state.chartsTitle.rightOneTitle }}</div>
                    <div ref="rightVisitPieChartRef" class="flexone"></div>
                </div>
                <div class="demo-container-right_two fl-column" style="height: 350px;">
                    <div class="childrenTitle"> {{ state.chartsTitle.rightTwoTitle }}</div>
                    <el-scrollbar>
                        <div class="peopleInfoWarp">
                            <div class="peopleInfo" v-for="(item, index) in 14">
                                <div class="avater">
                                    <img :src="avatarImg">
                                </div>
                                <div class="info">
                                    <div class="infoName rowAlignCenter">
                                        <div class="name">陈煌杰</div>
                                    </div>
                                    <div class="infoAddress rowAlignCenter">
                                        <div class="address">集美区域</div>
                                    </div>
                                    <div class="infoDay rowAlignCenter">
                                        <div class="day">2019.09.21</div>
                                    </div>
                                    <div class="infoTime">
                                        <div class="time">22:22:30</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
                <div class="demo-container-right_three fl-column" style="height: 350px;">
                    <div class="childrenTitle"> {{ state.chartsTitle.rightThreeTitle }}</div>
                    <el-scrollbar>
                        <div class="peopleInfoWarp">
                            <div class="peopleInfo" v-for="(item, index) in 24">
                                <div class="avater">
                                    <img :src="avatarImg">
                                </div>
                                <div class="info">
                                    <div class="infoName rowAlignCenter">
                                        <div class="name">陈煌杰</div>
                                    </div>
                                    <div class="infoAddress rowAlignCenter">
                                        <div class="address">集美区域</div>
                                    </div>
                                    <div class="infoDay rowAlignCenter">
                                        <div class="day">2019.09.21</div>
                                    </div>
                                    <div class="infoTime">
                                        <div class="time">22:22:30</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>

                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, onMounted, markRaw, watch, onUnmounted } from 'vue'
import map from '/@/assets/dash/demo2/map.png'
import * as echarts from 'echarts';
import { NextLoading } from '/@/utils/loading';
import avatarImg from '/@/assets/monitorAvter.png'
import avaterIcon from '/@/assets/dash/demo2/avater.png'
import timeIcon from '/@/assets/dash/demo2/avater.png'
import addressIcon from '/@/assets/dash/demo2/address.png'


// 左
const leftDayBarChartRef = ref()
const leftMonthBarChartRef = ref()
const leftYearBarChartRef = ref()

// 中

// 右
const rightVisitPieChartRef = ref()


const state = reactive({
    chartsData: {
        leftDayBarChart: null as any,
        leftMonthBarChart: null as any,
        leftYearBarChart: null as any,
        rightVisitPieChart: null as any,
        dispose: [null, '', undefined],
    },
    myCharts: [] as any,
    chartsTitle: {
        leftTitle: '访客统计',
        rightTitle: '访客管理',
        topTitle: '实时访客数据',
        dayBarTitle: '今日访客趋势',
        monthBarTitle: '当月访客趋势',
        yearBarTitle: '今年访客趋势',
        rightOneTitle: '未签离服务',
        rightTwoTitle: '未签离服务',
        rightThreeTitle: '黑名单预警',
    },
    tableData: [
        {
            code: '906',
            time: '2024-01-18 07:04',
            name: '陈照碧',
            address: '一级区域',

        },
        {
            code: '901',
            time: '2024-01-18 12:25',
            name: '张兵',
            address: '一级区域',

        },
        {
            code: '898',
            time: '2024-01-18 13:28',
            name: '谭静',
            address: '一级区域',

        },
        {
            code: '897',
            time: '2024-01-18 14:16',
            name: '廖昌国',
            address: '一级区域',

        },
        {
            code: '892',
            time: '2024-01-18 17:28',
            name: '周兴容',
            address: '一级区域',

        },
        {
            code: '901',
            time: '2024-01-18 12:25',

            name: '张兵',
            address: '一级区域',
        },
        {
            code: '898',
            time: '2024-01-18 13:28',
            name: '谭静',
            address: '一级区域',

        },
        {
            code: '897',
            time: '2024-01-18 14:16',
            name: '廖昌国',
            address: '一级区域',

        },
        {
            code: '892',
            time: '2024-01-18 17:28',
            name: '周兴容',
            address: '一级区域',

        },
        {
            code: '892',
            time: '2024-01-18 17:28',
            name: '周兴容',
            address: '一级区域',

        },
        {
            code: '901',
            time: '2024-01-18 12:25',
            name: '张兵',
            address: '一级区域',

        },
        {
            code: '898',
            time: '2024-01-18 13:28',
            name: '谭静',
            address: '一级区域',

        },
        {
            code: '897',
            time: '2024-01-18 14:16',
            name: '廖昌国',
            address: '一级区域',

        },
        {
            code: '892',
            time: '2024-01-18 17:28',
            name: '周兴容',
            address: '一级区域',

        },
    ]
})


const initLeftDayBarChart = () => {
    if (!state.chartsData.dispose.some((b: any) => b === state.chartsData.leftDayBarChart)) state.chartsData.leftDayBarChart.dispose();
    state.chartsData.leftDayBarChart = markRaw(echarts.init(leftDayBarChartRef.value));
    const option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: '#16cfd0',
            },
            right: '10%',
            top: '5%',
            data: ['到访人数', '预约人数']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#16cfd0',
                },
            },
            axisLabel: {
                color: '#16cfd0',
            },
            data: ['1天', '7天', '14天', '21天', '31天']
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#16cfd0',

                },
            },
        },
        series: [
            {
                name: '到访人数',
                type: 'line',
                smooth: true,
                symbolSize: 10,
                lineStyle: {
                    width: 4,
                    color: '#9D1F72'
                },
                itemStyle: {
                    color: '#9D1F72'
                },
                data: [1000, 1200, 900, 970, 1000]
            },
            {
                name: '预约人数',
                type: 'line',
                smooth: true,
                symbolSize: 10,
                lineStyle: {
                    width: 4,
                    color: '#51BC6F'
                },
                itemStyle: {
                    color: '#51BC6F'
                },
                data: [2000, 2200, 1900, 1970, 2000]
            }
        ]
    };
    state.chartsData.leftDayBarChart.setOption(option);
    state.myCharts.push(state.chartsData.leftDayBarChart);
}
const initLeftMonthBarChart = () => {
    if (!state.chartsData.dispose.some((b: any) => b === state.chartsData.leftMonthBarChart)) state.chartsData.leftMonthBarChart.dispose();
    state.chartsData.leftMonthBarChart = markRaw(echarts.init(leftMonthBarChartRef.value));
    const option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: '#16cfd0',
            },
            right: '10%',
            top: '5%',
            data: ['到访人数', '预约人数']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#16cfd0',
                },
            },
            axisLabel: {
                color: '#16cfd0',
            },
            data: ['1月', '3月', '6月', '9月', '12月']
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#16cfd0',

                },
            },
        },
        series: [
            {
                name: '到访人数',
                type: 'line',
                smooth: true,
                symbolSize: 10,
                lineStyle: {
                    width: 4,
                    color: '#9D1F72'
                },
                itemStyle: {
                    color: '#9D1F72'  // 线颜色
                },
                data: [1000, 1200, 900, 970, 1000]
            },
            {
                name: '预约人数',
                type: 'line',
                smooth: true,
                symbolSize: 10,
                lineStyle: {
                    width: 4,
                    color: '#51BC6F'
                },
                itemStyle: {
                    color: '#51BC6F' // 线颜色
                },
                data: [2000, 2200, 1900, 1970, 2000]
            }
        ]
    };
    state.chartsData.leftMonthBarChart.setOption(option);
    state.myCharts.push(state.chartsData.leftMonthBarChart);
}
const initLeftYearBarChart = () => {
    if (!state.chartsData.dispose.some((b: any) => b === state.chartsData.leftYearBarChart)) state.chartsData.leftYearBarChart.dispose();
    state.chartsData.leftYearBarChart = markRaw(echarts.init(leftYearBarChartRef.value));
    const option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: '#16cfd0',
            },
            right: '10%',
            top: '5%',
            data: ['到访人数', '预约人数']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#16cfd0',
                },
            },
            axisLabel: {
                color: '#16cfd0',
            },
            data: ['1小时', '6小时', '12小时', '16小时', '24小时']
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#16cfd0',

                },
            },
        },
        series: [
            {
                name: '到访人数',
                type: 'line',
                smooth: true,
                symbolSize: 10,
                lineStyle: {
                    width: 4,
                    color: '#9D1F72'
                },
                itemStyle: {
                    color: '#9D1F72'  // 线颜色
                },
                data: [1000, 1200, 900, 970, 1000]
            },
            {
                name: '预约人数',
                type: 'line',
                smooth: true,
                symbolSize: 10,
                lineStyle: {
                    width: 4,
                    color: '#51BC6F'
                },
                itemStyle: {
                    color: '#51BC6F' // 线颜色
                },
                data: [2000, 2200, 1900, 1970, 2000]
            }
        ]
    };
    state.chartsData.leftYearBarChart.setOption(option);
    state.myCharts.push(state.chartsData.leftYearBarChart);
}
const rightVisitPieChart = () => {
    if (!state.chartsData.dispose.some((b: any) => b === state.chartsData.rightVisitPieChart)) state.chartsData.rightVisitPieChart.dispose();
    state.chartsData.rightVisitPieChart = markRaw(echarts.init(rightVisitPieChartRef.value));

    const option = {

        legend: {
            orient: 'vertical',   // 设置图例垂直排列
            top: '35%',
            right: 10,
            itemGap: 30,
            textStyle: {
                color: '#fff',
                fontSize: 14,
            },
        },
        color: ['#2EA9E5', '#F7B044', '#D71C60'],
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 28,
                        color: '#fff',

                    }
                },
                data: [
                    { value: 500, name: '自动读取' },
                    { value: 250, name: '手工录入' },
                    { value: 250, name: '微信' },
                ]
            }
        ]
    };

    state.chartsData.rightVisitPieChart.setOption(option);
    state.myCharts.push(state.chartsData.rightVisitPieChart);
}

// 批量设置 echarts resize
const initEchartsResizeFun = () => {
    nextTick(() => {
        for (let i = 0; i < state.myCharts.length; i++) {
            setTimeout(() => {
                state.myCharts[i].resize();
            }, i * 1000);
        }
    });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
    window.addEventListener('resize', initEchartsResizeFun);
};
// 页面加载时
onMounted(() => {
    NextLoading.done();
    createScroll();
    initEchartsResize();
    initLeftDayBarChart();
    rightVisitPieChart();
    initLeftMonthBarChart();
    initLeftYearBarChart();
});

let timer = null;
let myTable = ref(null);

const clearScroll = () => {
    clearInterval(timer);
    timer = null;
};

const createScroll = () => {
    clearScroll();
    // 拿到 table
    const table = myTable.value.layout.table.refs;
    // 拿到可以滚动的元素
    const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild;

    timer = setInterval(() => {
        tableWrapper.scrollTop += 1;
        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
        if (tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
            tableWrapper.scrollTop = 0;
        }
    }, 100);
};

onMounted(() => {
    createScroll();
});
onUnmounted(() => {
    clearScroll();
});

</script> 

<style scoped lang="scss">
.demo-container {
    background-image: url('/@/assets/dash/demo2/bg.jpg');
    background-size: 100% 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px 16px 10px 10px;
    display: flex;
    overflow-y: hidden;
    height: 100%;
    color: #3CCEFB;

    .demo-container-left {
        width: 420px;
        background-image: url('/@/assets/dash/demo2/videoBox.png');
        background-size: 100% 100%;
        // overflow-y: auto;
    }

    .demo-container-top {
        flex: 1
    }

    .demo-container-right {
        width: 420px;
        background-image: url('/@/assets/dash/demo2/videoBox.png');
        background-size: 100% 100%;
    }
}

.fl-column {
    display: flex;
    flex-direction: column;
}

.flexone {
    flex: 1 !important;
}

.demo-container-content_title {
    text-align: center;
}

.demo-container-content_title span {
    display: inline-block;
    background: url('/@/assets/dash/demo2/titbg.png') repeat-x;
    position: relative;
    height: 27px;
    font-size: 18px;
    line-height: 24px;
}

.demo-container-content_title span:before {
    content: "";
    background: url('/@/assets/dash/demo2/titleft.png');
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 27px;
    position: absolute;
    left: -50px;
    top: 0;
}

.demo-container-content_title span:after {
    content: "";
    background: url('/@/assets/dash/demo2/titright.png') no-repeat;
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 27px;
    position: absolute;
    right: -50px;
    top: 0;
}

.demo-container-content_titleChildren {
    background: url('/@/assets/dash/demo2/titlebg.png') no-repeat;
    text-align: center;
    background-size: 100%;
    height: 25px;
    line-height: 25px;
    padding-top: 5px;
}

.demo-container-top_one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    margin: 0px 15px 5px;
    height: 100px;
    background: url('/@/assets/dash/demo2/border.png') no-repeat;
    background-size: 100% 100%;

    .oneItem {
        display: flex;
        flex-direction: column;
        width: 100px;


        .num {
            margin-bottom: 4px;
            font-size: 22px;
            color: #fff;
        }

        .desc {
            font-size: 14px;
            color: #4c9bfd;
            height: 15px;
            line-height: 15px;
            position: relative;
            padding-left: 10px;
            vertical-align: bottom;
        }

        .desc::before {
            content: "";
            position: absolute;
            width: 4px;
            height: 14px;
            left: 0;
            border-radius: 8px;
        }

        .desc1::before {
            background: #006cff;
        }

        .desc2::before {
            background: #6acca3;
        }

        .desc3::before {
            background: #6acca3;
        }

        .desc4::before {
            background: #ed3f35;
        }

    }
}

.map {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;

    .leftCardWarp {
        width: 200px;
        height: 80px;
        box-sizing: border-box;
        padding: 10px 20px;
        border: 2px solid rgba(14, 253, 255, 0.5);
        position: relative;
        margin-left: 15px;

        .cardtitle {
            color: #fff;
            font-size: 14px;
        }

        .leftCardNum {
            color: #7DC9FD;
            font-size: 26px;
            margin-top: 8px;

            span {
                font-size: 14px;
            }
        }
    }

    .rightCardWarp {
        width: 200px;
        height: 80px;
        box-sizing: border-box;
        padding: 10px 20px;
        border: 2px solid rgba(14, 253, 255, 0.5);
        position: relative;
        margin-right: 15px;

        .cardtitle {
            color: #fff;
            font-size: 14px;
        }

        .leftCardNum {
            color: #7DC9FD;
            font-size: 26px;
            margin-top: 8px;

            span {
                font-size: 14px;
            }
        }
    }

    .leftCard {
        position: absolute;
        background: url('/@/assets/dash/demo2/title_left_bg.png') no-repeat;
        background-size: 50%;
        width: 150px;
        height: 10px;
        left: -2px;
        top: -12px;
        z-index: 18;
    }

    .rightCard {
        position: absolute;
        background: url('/@/assets/dash/demo2/title_left_bg.png') no-repeat;
        background-size: 50%;
        width: 150px;
        height: 10px;
        right: 0;
        top: 0
    }

    .map1 {
        position: relative;
        z-index: 10;

        img {
            width: 250px;
        }

    }

    .map1::before {
        position: absolute;
        content: "";
        background: url('/@/assets/dash/demo2/mapWarp1.png') no-repeat;
        background-size: 100% 100%;
        width: 340px;
        height: 340px;
        left: -45px;
        top: -45px;
        z-index: 12;
        animation: myfirst 7s infinite;
    }

    .map1::after {
        position: absolute;
        content: "";
        background: url('/@/assets/dash/demo2/mapWarp2.png') no-repeat;
        background-size: 100% 100%;
        left: -25px;
        top: -25px;
        width: 300px;
        height: 300px;
        z-index: 14;
        animation: myfirst2 7s infinite;
    }

    @keyframes myfirst2 {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(359deg);
        }
    }

    @keyframes myfirst {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-359deg);
        }
    }
}

.demo-container-center {
    margin-top: 40px;
    box-sizing: border-box;
    padding: 15px;
    padding-bottom: 0;
    height: 623px;
    overflow-y: auto;
}

:deep(.el-table) {
    background-color: transparent !important;
}

:deep(.el-table tr) {
    background-color: transparent !important;
    color: #fff;
}

:deep(.el-table th) {
    background-color: transparent !important;
    color: #fff;
}

:deep(.el-table .hover-row) {
    background-color: transparent !important;
    color: #000;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.childrenTitle {
    background: linear-gradient(to right, #5ab6e470 1%, transparent 100%);
    color: rgba(14, 253, 255);
    padding: 5px 10px;
    margin-top: 5px;
    font-size: 16px
}

.peopleInfo {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    width: 190px;
    height: 120px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #242B57;
    margin-bottom: 5px;

    .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5px 0 5px 10px;
        color: #d8d8d8;
    }

    .avater {
        height: 100%;
        width: 70px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .name {
        position: relative;
    }

    .name::before {
        position: absolute;
        left: -18px;
        background: url('/@/assets/dash/demo2/avater.png') no-repeat;
        background-size: 100% 100%;
        content: "";
        width: 16px;
        height: 16px;
    }

    .address {
        position: relative;
    }

    .address::before {
        position: absolute;
        left: -18px;
        background: url('/@/assets/dash/demo2/address.png') no-repeat;
        background-size: 100% 100%;
        content: "";
        width: 16px;
        height: 16px;
    }

    .day {
        position: relative;
    }

    .day::before {
        position: absolute;
        left: -18px;
        background: url('/@/assets/dash/demo2/time.png') no-repeat;
        background-size: 100% 100%;
        content: "";
        width: 16px;
        height: 16px;
    }

    .time {
        position: relative;
    }

    .time::before {
        position: absolute;
        left: -18px;
        background: url('/@/assets/dash/demo2/time.png') no-repeat;
        background-size: 100% 100%;
        content: "";
        width: 16px;
        height: 16px;
    }

}

.rowAlignCenter {
    display: flex;
    align-items: center;
}

.peopleInfoWarp {
    display: flex;
    flex: 1;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px 10px;
    overflow-y: auto;
}

:deep(::-webkit-scrollbar-thumb) {
    background-color: rgba(14, 253, 255, .7)
}

:deep(::-webkit-scrollbar-track-piece) {
    background-color: rgba(0, 0, 0, 0.5);
}
</style>